<template>
  <!-- 单选框 -->
  <div class="header-container">
    <div>
      <a-checkable-tag class="filter-tag" :checked="showComponentMode" @change="showComponentMode = !showComponentMode">
        组件切换页面
        <input type="checkbox" v-model="showComponentMode" />
      </a-checkable-tag>
    </div>
    <!-- 按钮，点击后触发 helloworld 方法 -->
    <a-button type="primary" @click="helloworld">你好</a-button>
  </div>
  <!-- 页面主体内容区域，设置内边距、背景色和最小高度 -->
  <div class="content-container" v-if="!showComponentMode">
    这是通过路由跳转切换的页面
    <div class="feature-list">
      <div class="feature-item">
        <span class="title">优点</span>
        <ul>
          <li>清晰的URL管理：每个页面有独立URL，便于分享和书签管理</li>
          <li>浏览器导航支持：天然支持前进/后退按钮和浏览器历史记录</li>
          <li>SEO友好：搜索引擎能更好索引独立页面内容</li>
          <li>独立生命周期：各页面组件可独立管理状态和生命周期</li>
          <li>代码解耦：不同页面可独立开发和维护</li>
        </ul>
      </div>

      <div class="feature-item">
        <span class="title">缺点</span>
        <ul>
          <li style="color: red;">页面刷新：每次切换需要重新加载组件和资源</li>
          <li style="color: red;">性能开销：频繁切换时可能产生白屏/加载延迟</li>
          <li>状态丢失：页面卸载后状态无法保留（需结合vuex/pinia）</li>
          <li>代码冗余：相似页面可能存在重复代码</li>
        </ul>
      </div>

      <div class="feature-item">
        <span class="title">适用场景</span>
        <ul>
          <li>主要页面导航：如首页/列表页/详情页等核心页面</li>
          <li>需要独立URL的场景：如用户个人中心、订单详情页</li>
          <li>SEO敏感页面：需要搜索引擎收录的内容页面</li>
          <li>跨模块导航：不同业务模块间的页面跳转</li>
        </ul>
      </div>
    </div>
  </div>
  <ParentChildCard v-else />
</template>

<script lang="ts" setup>
import DishDao from '@/daos/dish_dao'; // 导入DishDao类，用于数据交互
import { message } from 'ant-design-vue'; // 导入Ant Design Vue的消息提示组件
import ParentChildCard from './ParentChildCard.vue';
import { ref } from 'vue';

const showComponentMode = ref<boolean>(false);


// 创建DishDao实例
const dishDao = new DishDao();

// 定义helloworld方法，用于处理按钮点击事件
const helloworld = async () => {
  try {
    // 调用dishDao的helloworld方法，并等待结果
    let result = await dishDao.helloworld();
    console.log(result); // 打印结果到控制台
    // 根据返回结果的状态码判断并显示相应的消息
    if (result.data.code === 200) {
      message.info(result.data.data); // 显示成功信息
    } else {
      message.error("没有正常获取到数据"); // 显示错误信息
    }
  } catch (error) {
    // 捕获并处理异常
    console.error(error); // 打印错误信息到控制台
    message.error("请求错误，网络故障"); // 显示网络故障信息
  }
};
</script>

<style scoped>
/* 定义面包屑容器样式 */
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px 0;
}

.filter-tag {
  border: 2px solid #d9d9d9;
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 6px;
  transition: all 0.3s;
}

.filter-tag input {
  margin-left: 4px;
  position: relative;
  top: 1px;
}


/* 定义页面主体内容区域样式 */
.content-container {
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 24px;
  background: #fff;
  text-align: center;
  /* 增大字体大小 */
  font-size: 24px;
  /* 设置字体颜色 */
  color: #333;
}

.feature-list {
  width: 100%;
  margin: 24px auto;
  max-width: 900px;
}

.feature-item {
  text-align: left;
  margin: 24px 0;
  padding: 16px;
  background: #f5f5f5;
  border-radius: 8px;
}

.feature-item .title {
  text-align: center;
  display: block;
  font-weight: bold;
  margin-bottom: 8px;
  color: #1890ff;
}
</style>